[Flyout system] Dynamic z-index calculation#9238
Merged
tkajtoch merged 7 commits intoelastic:feat/flyout-systemfrom Nov 26, 2025
Merged
[Flyout system] Dynamic z-index calculation#9238tkajtoch merged 7 commits intoelastic:feat/flyout-systemfrom
tkajtoch merged 7 commits intoelastic:feat/flyout-systemfrom
Conversation
tsullivan
approved these changes
Nov 25, 2025
Member
tsullivan
left a comment
tsullivan
left a comment
There was a problem hiding this comment.
Relatively simple fix, addresses two important issues. LGTM!
I tested by changing the Non-Session flyout in the layout-euiflyout-flyout-manager--multi-session-example storybook: I changed side from left to right. Now, when we open the non-session flyout after a managed flyout is open, the non-session flyout appears correctly on top.
One suggestion I might give is to put into the code the test I did:
diff --git packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
index dafa9ee68..35162e47d 100644
--- packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
+++ packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
@@ -313,7 +313,6 @@ const NonSessionFlyout: React.FC<{ size: string }> = ({ size }) => {
ownFocus={flyoutOwnFocus}
pushAnimation={true}
onClose={flyoutOnClose}
- side="left"
>
<EuiFlyoutHeader>
<EuiTitle size="m">…FLYOUT` and `currentZIndex`
tkajtoch
added
the
skip-changelog
Member
Author
|
@tsullivan I removed the |
…flyout-system-dynamic-z-index
Collaborator
💚 Build SucceededHistory
cc @tkajtoch |
Collaborator
💚 Build Succeeded
History
cc @tkajtoch |
This was referenced Nov 26, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves #9160
Resolves #9237
This PR fixes stacking of managed and unmanaged flyouts by dynamically calculating
z-indexvalues for each new flyout. The added z-index value gets reset to0when no more flyouts are open to avoid too high values in long-running runtimes.This PR has
skip-changeloglabel applied as it brings back the expected flyouts "stacking" behavior to the Flyout System. There should be no differences in rendering multiple flyouts one on top of another compared tomain.Why are we making this change?
Part of the Flyout System project; fixing remaining bugs before merging the feature branch to
mainScreenshots #
Impact to users
No negative impact to users. They'll see the overlays applied properly, no matter the DOM injection order or the managed and unmanaged flyouts combinations.
QA
Remove or strikethrough items that do not apply to your PR.